<template>
    <div>
        <div class="head">
            <el-form :model="formQuery" :inline="true" class="demo-form-inline" size="mini">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item label="订单编号:" prop="Bianhao">
                            <el-input v-model="formQuery.Bianhao" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="下单人:" prop="placePerson">
                            <el-input v-model="formQuery.placePerson" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="所属单位:" prop="unit">
                            <el-input v-model="formQuery.unit" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="联系电话:" prop="phoneNumber">
                            <el-input v-model="formQuery.phoneNumber" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item label="预定时间:" prop="dueTime">
                            <el-input v-model="formQuery.dueTime" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="汇总状态:" prop="state">
                            <el-input v-model="formQuery.state" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="订单总价格:" prop="totalValue">
                            <el-input type="text" v-model="formQuery.totalValue" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="content">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :border="true"
                header-cell-class-name="active-head" cell-class-name="row-style">
                <el-table-column type="index" width="55" />
                <el-table-column prop="goodsName" label="产品名称" />
                <el-table-column prop="price" label="价格" />
                <el-table-column prop="guige" label="规格" />
                <el-table-column prop="number" label="数量" />
                <el-table-column prop="smallComput" label="小计" />
            </el-table>
        </div>
        <div class="footer">
            <el-form :model="footForm" :inline="true" class="demo-form-inline" size="mini">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="订单审核:" prop="state">
                            <el-radio-group v-model="footForm.shState">
                                <el-radio :label="1">通过</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="审核人:" prop="shPerson">
                            <el-input v-model="footForm.shPerson" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="审核时间:" prop="shTime">
                            <el-input v-model="footForm.shTime" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="审核意见:" prop="shJanyi" class="txt">
                            <el-input  type="textarea" v-model="footForm.shJanyi" size="medium"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="butn">
                <el-button type="info" @click="goPreve" size="mini">返回</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import { removeInfo } from '@/utils/storage'
import { getDetailList } from '@/api/request/order/index'
export default {
    name: 'order-detaile-page',
    data() {
        return {
            formQuery: {
                Bianhao: '',
                placePerson: '',
                phoneNumber: '',
                dueTime: '',
                state: '',
                totalValue: ''
            },
            footForm: {
                shState: '',
                shPerson: '',
                shTime: '',
                shJanyi: ''
            },
            tableData: [],
        }
    },
    computed: {
        ...mapState('orderDetaile', ['queryData'])
    },
    created() {
        this.getList(this.$route.query.id)
    },
    mounted() {
        this.queryData.state = this.queryData.state == 0 ? '未汇总' : '已汇总'
        this.formQuery = this.queryData
    },
    destroyed() {
        removeInfo('queryData')
    },
    methods: {
        async getList(id) {
            let res = await getDetailList('/detail-list', { ids: id })
            if (res.code != 200) return this.$message.error('error')
            this.tableData = res.datas
            this.footForm = res.footer
        },
        goPreve(){
            this.$router.push('/order/order-list')
        }
    }
}
</script>
<style scoped lang="less">
.content {
    background-color: #fff;

    /deep/ .active-head {
        color: #333;
        text-align: center;
    }

    /deep/ .row-style {
        text-align: center;
    }

    .gd-name {
        cursor: pointer;
        color: #1E90FF;
    }
}

.footer {
    background: #fff;
    padding: 15px;
    /deep/ .el-row {
        width: 70%;
        .el-textarea {
            width: 785px;
        }
    }
    .butn{
        width: 100%;
        text-align: center;
    }
}
</style>